<template>
	<view>
		<canvas :style="dimensions" canvas-id="firstCanvas" id="firstCanvas" @error="canvasIdErrorCallback"></canvas>
	</view>
</template>

<script>
	export default {
		props:{
			dimensions: {
				type : String,
				default:'width: 300px; height: 200px;'
			}	
		},
		data() {
			return {
				
			}
		},
		mounted: function (e) {
			var context = uni.createCanvasContext('firstCanvas')
			context.setStrokeStyle("#00ff00")
			context.setLineWidth(5)
			context.rect(0, 0, 200, 200)
			context.stroke()
			context.setStrokeStyle("#ff0000")
			context.setLineWidth(2)
			context.moveTo(160, 100)
			context.arc(100, 100, 60, 0, 2 * Math.PI, true)
			context.moveTo(140, 100)
			context.arc(100, 100, 40, 0, Math.PI, false)
			context.moveTo(85, 80)
			context.arc(80, 80, 5, 0, 2 * Math.PI, true)
			context.moveTo(125, 80)
			context.arc(120, 80, 5, 0, 2 * Math.PI, true)
			context.stroke()
			context.draw()
		},
		methods: {
			canvasIdErrorCallback: function (e) {
				console.error(e.detail.errMsg)
			}
		}
	}
</script>

<style>

</style>
